<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章管理</el-breadcrumb-item>
            <el-breadcrumb-item>文章列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="box-card">
            <el-col>
                <el-input style="width: 300px;" placeholder="请输入文章id" class="input-with-select" v-model="queryInfo.query" clearable @clear="getArticle">
                    <template #append>
                        <el-button @click="selectList">搜索</el-button>
                    </template>
                </el-input>
            </el-col>

            <el-table v-loading="loading" :data="articleList" stripe border style="width: 100%;" highlight-current-row size="small">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="id" label="文章id" width="200"></el-table-column>
                <el-table-column prop="title" label="文章标题" width="200" ></el-table-column>
                <el-table-column prop="abstract" label="文章摘要" width="180"></el-table-column>
                <el-table-column prop="tag" label="标签" width="80"></el-table-column>
                <el-table-column prop="modify_time" label="修改时间" width="210"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" @click="getArticleDetail(scope.row)" icocircle>详&nbsp;&nbsp;情</el-button>
                        <el-button type="success" @click="pass(scope.row)">通&nbsp;&nbsp;过</el-button>
                        <el-button type="warning" @click="fail(scope.row)">不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>

            <!-- 分页 -->
            <el-pagination
                v-model:currentPage=queryInfo.pageNum
                v-model:page-size=queryInfo.pageSize
                :page-sizes="[2, 5, 10, 20]"
                small="false"
                :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper"
                :total=queryInfo.total
                background>
            </el-pagination>

            <el-dialog title="文章详情" v-model="dialogFormVisible">
                <el-form :model="articleDetail">
                    <el-form-item label="文章详情" label-width="150">
                        <div><h5 v-html="articleDetail.content" style="text-overflow: ellipsis"></h5></div>
                    </el-form-item>
<!--                    <el-form-item>-->
<!--                        <el-radio v-model="articleJudge" label="1" border>通&nbsp;&nbsp;过</el-radio>-->
<!--                        <el-radio v-model="articleJudge" label="2" border>不通过</el-radio>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="审核意见" v-if="articleJudge==='2'" label-width="150">-->
<!--                        <el-input v-model="audit_opinion" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" style="margin-left: 450px" @click="dialogFormVisible = false">确定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import API from '../../network/article'

export default {
    created() {
      this.getArticle()
    },
    data(){
        return{
            queryInfo:{         //分页数据
                pageNum: 1,
                pageSize: 2,
                total: 0,
                query: '',
            },
            articleJudge: "1",          //单选框
            dialogFormVisible: false,
            articleList:[],       //请求返回的数据,
            articleDetail:{},      //获取的当前文章详情数据
            audit_opinion: '',       //审核意见
        }
    },
    methods:{
        getArticle(){
            API.GetArticle(this.queryInfo.pageNum).then(res=>{
                //console.log(res)
                this.articleList = res.data.data.data
                this.queryInfo.pageNum = res.data.data.current_page
                this.queryInfo.pageSize = res.data.data.pageSize
                this.queryInfo.total = res.data.data.total
            })
        },
        selectList(){         //搜索文章
            this.articleList = this.articleList.filter(item => item.id === this.queryInfo.query)
        },
        getArticleDetail(scope){        //文章详情
            this.dialogFormVisible = true
            API.GetArticleDetail(scope.id).then(res=>{
                this.articleDetail = res.data.data
                console.log(this.articleDetail)
            })
        },
        // determine(){
        //     //console.log(this.articleJudge)
        //     //console.log(this.articleDetail)
        //     if(this.articleJudge === "1"){
        //         API.Pass(this.articleDetail.id).then(res => {
        //             console.log(this.articleDetail.id)
        //             console.log(res)
        //             if(res.data.code === 400){
        //                 this.$message({
        //                     type: 'error',
        //                     message: '提交失败'
        //                 });
        //             }else{
        //                 this.$message({
        //                     type: 'success',
        //                     message: '提交成功'
        //                 });
        //             }
        //             //console.log(res)
        //             this.getArticle()
        //         })
        //     }else if(this.articleJudge === "2"){
        //         API.Fail(this.articleDetail.id,this.audit_opinion).then(res=> {
        //             console.log(res)
        //             if(res.data.code === 400){
        //                 this.$message({
        //                     type: 'error',
        //                     message: '提交失败'
        //                 });
        //             }else{
        //                 this.$message({
        //                     type: 'success',
        //                     message: '提交成功'
        //                 });
        //             }
        //             this.getArticle()
        //         })
        //     }
        //     this.dialogFormVisible = false
        //
        // },
        pass(scope){
            API.Pass(scope.id).then(res => {
                console.log(scope.id)
                if(res.data.code === 400){
                    this.$message({
                        type: 'error',
                        message: '提交失败'
                    });
                }else{
                    this.$message({
                        type: 'success',
                        message: '提交成功'
                    });
                }
                //console.log(res)
                this.getArticle()
            })
        },
        fail(scope){
            this.$prompt('请输入审核意见','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                API.Fail(scope.id,value).then(res=> {
                    console.log(res)
                    if(res.data.code === 400){
                        this.$message({
                            type: 'error',
                            message: '提交失败'
                        });
                    }else{
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                    }
                    this.getArticle()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        }
    }
}
</script>

<style>

.el-form-item{
    padding-right: 100px;
    padding-left: 100px;
}

p{
    padding-right: 100px;
    padding-left: 100px;
    border: 1px solid #8c939d;
}
</style>
